iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 28
1
Modern Web

從零開始的個人化記帳程式開發系列 第 28

記帳程式 (28):待購清單 Part.1 - 初始畫面及排版

  • 分享至 

  • xImage
  •  

漫漫鐵人三十天挑戰,終於也快到了尾聲呢,就用待購清單來收尾吧!

開發紀錄

畫面初始化

首先先把初始畫面弄出來,這邊分成主頁面及每一張看板卡的 component:

@/views/Buy/index.vue

<template>
  <div class="pg-to-buy-list">
    <h2 class="pg-to-buy-list__title">待購清單</h2>
    <el-card>
      <div class="pg-to-buy-list__card-container">
        <to-buy-list-card class="pg-to-buy-list__card"
                          :key="item.id"
                          v-for="item in cardList"
                          :title="item.title"
                          :list="item.list" />
      </div>
    </el-card>
  </div>
</template>

@/components/ToBuyListCard/index.vue

<template>
  <div class="cp-to-buy-list-card">
    <div class="cp-to-buy-list-card__title">
      <h3>{{title}}</h3>
    </div>
    <div class="cp-to-buy-list-card__item-container"
         :id="title">
      <div class="cp-to-buy-list-card__item"
           :key="item"
           v-for="item in list">
        <p>{{item}}</p>
      </div>
    </div>
  </div>
</template>

資料結構

其中上面的資料結構由父層頁面傳給四個卡片 component:

data() {
  return {
    cardList: [
      {
        id: 'want',
        title: '想要',
        list: ['iPhone 11 Pro Max', 'BOSE Lifestyle 600']
      },
      {
        id: 'need',
        title: '需要',
        list: ['筆電背包', '眼鏡', '手錶']
      },
      {
        id: 'satisfy',
        title: '滿足',
        list: ['空氣清淨機', '電磁爐', 'Brita 濾水壺']
      },
      {
        id: 'sublimate',
        title: '昇華',
        list: ['任天堂 Switch', 'PS4', 'AirPods']
      }
    ]
  }
},

樣式排版

這邊主要利用 Flexbox 做排版:

@/views/Buy/index.vue

.pg-to-buy-list {
  &__title {
    margin-bottom: 1.5rem;
  }
  &__card-container {
    max-width: 960px;
    min-height: 320px;
    margin: 2rem auto;
    display: flex;
    justify-content: space-around;
  }
}

@/components/ToBuyListCard/index.vue

.cp-to-buy-list-card {
  width: 200px;
  background-color: #aaa;
  &__title {
    width: 100%;
    height: 50px;
    text-align: center;
    background-color: #999;
    line-height: 4rem;
    vertical-align: middle;
  }
  &__item-container {
    display: flex;
    flex-direction: column;
  }
  &__item {
    width: 90%;
    height: 3rem;
    background-color: #ddd;
    margin: 0.5rem auto;
    text-align: center;
    line-height: 3rem;
    vertical-align: middle;
  }
}

今日成果

今天先把初始畫面、資料結構及元件切好,並做一下簡單的排版,明天要來使用 dragula 這個套件完成拖拉操作。

今天先到這,我們明天見!


上一篇
記帳程式 (27):來做個待購清單吧!
下一篇
記帳程式 (29):待購清單 Part.2 - 使用 Dragula 實作拖拉效果
系列文
從零開始的個人化記帳程式開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言